<template>
  <div class="crud-opts">
    <span class="crud-opts-left">
      <!--左侧插槽-->
      <slot name="left" />
      <el-button
        v-if="crud.optShow.add"
        v-permission="permission.add"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="crud.toAdd"
      >
        新增
      </el-button>
      <el-button
        v-if="crud.optShow.edit"
        v-permission="permission.edit"
        class="filter-item"
        size="mini"
        type="success"
        icon="el-icon-edit"
        :disabled="crud.selections.length !== 1"
        @click="crud.toEdit(crud.selections[0])"
      >
        修改
      </el-button>
      <el-button
        v-if="crud.optShow.del"
        slot="reference"
        v-permission="permission.del"
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        size="mini"
        :loading="crud.delAllLoading"
        :disabled="crud.selections.length === 0"
        @click="toDelete(crud.selections)"
      >
        删除
      </el-button>
      <el-button
        slot="reference"
        class="filter-item"
        type="warning"
        icon="el-icon-sort"
        size="mini"
        :disabled="crud.selections.length === 0"
        @click="toReCotrast(crud.selections)"
      >
        数据比对
      </el-button>
      <el-button
        slot="reference"
        class="filter-item"
        type="info"
        icon="el-icon-sort"
        size="mini"
        :disabled="crud.selections.length === 0"
        @click="toReCotrastFailed(crud.selections)"
      >
        失败比对
      </el-button>
      <el-button
        class="filter-item"
        :loading="downloadLoading"
        type="primary"
        size="mini"
        @click="exportData"
      ><i class="el-icon-download" />
        导出
      </el-button>
      <el-upload
        ref="uploadExcel"
        style="display: inline-block"
        class="upload-demo"
        :loading="uploadLoading"
        action=""
        multiple
        :auto-upload="false"
        :on-change="handleUploadJobChange"
        :file-list="fileList"
        :show-file-list="false"
      >
        <div>
          <el-button
            size="mini"
            class="filter-item"
            type="primary"
            icon="el-icon-upload2"
          >
            导入
          </el-button>
        </div>
      </el-upload>
      <slot name="beforeExport" />
      <!--右侧-->
      <slot name="right" />
    </span>
    <el-button-group class="crud-opts-right">
      <el-button
        size="mini"
        plain
        type="info"
        icon="el-icon-search"
        @click="toggleSearch()"
      />
      <el-button
        size="mini"
        icon="el-icon-refresh"
        @click="crud.refresh()"
      />
      <el-popover
        placement="bottom-end"
        width="150"
        trigger="click"
      >
        <el-button
          slot="reference"
          size="mini"
          icon="el-icon-s-grid"
        >
          <i
            class="fa fa-caret-down"
            aria-hidden="true"
          />
        </el-button>
        <el-checkbox
          v-model="allColumnsSelected"
          :indeterminate="allColumnsSelectedIndeterminate"
          @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
        <el-checkbox
          v-for="item in crud.props.tableColumns"
          :key="item.label"
          v-model="item.visible"
          @change="handleCheckedTableColumnsChange(item)"
        >
          {{ item.label }}
        </el-checkbox>
      </el-popover>
    </el-button-group>
  </div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
import dataContrastApi from '@/api/data/contrast/contrastTask'
import { upload } from '@/api/data'
import request from '@utils/request'
import { downloadFile } from '@utils'

export default {
  mixins: [crud()],
  props: {
    permission: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      downloadLoading: false,
      uploadLoading: false,
      fileList: [],
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false
    }
  },
  created() {
    this.crud.updateProp('searchToggle', true)
  },
  methods: {
    toReCotrast(datas) {
      const ids = []
      if (datas instanceof Array) {
        datas.forEach(val => {
          ids.push(val.pkId)
        })
      } else {
        ids.push(datas.pkId)
      }
      dataContrastApi.contrast('ALL', ids).then(data => {
        this.crud.notify('数据对比开始！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.crud.refresh()
      }).catch(() => {
        this.crud.notify('任务启动失败！', CRUD.NOTIFICATION_TYPE.ERROR)
      })
    },
    toReCotrastFailed(datas) {
      const ids = []
      if (datas instanceof Array) {
        datas.forEach(val => {
          ids.push(val.pkId)
        })
      } else {
        ids.push(datas.pkId)
      }
      dataContrastApi.contrast('FAIL', ids).then(data => {
        this.crud.notify('失败任务对比开始！', CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.crud.refresh()
      }).catch(() => {
        this.crud.notify('任务启动失败！', CRUD.NOTIFICATION_TYPE.ERROR)
      })
    },
    toDelete(datas) {
      this.$confirm(`确认删除选中的${datas.length}条数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.crud.delAllLoading = true
        this.crud.doDeleteByPkIds(datas)
      }).catch(() => {
      })
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.allColumnsSelected = true
        return
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val
      }
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0
      let selectedCount = 0
      for (const key in this.crud.props.tableColumns) {
        ++totalCount
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0
      }
      if (selectedCount === 0) {
        this.crud.notify('请至少选择一列', CRUD.NOTIFICATION_TYPE.WARNING)
        this.$nextTick(function() {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
    },
    toggleSearch() {
      this.crud.props.searchToggle = !this.crud.props.searchToggle
    },
    handleUploadJobChange(file, fileList) {
      const fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (fileName !== 'xlsx' && fileName !== 'xls') {
        this.crud.notify('文件类型应为excel文件!', CRUD.NOTIFICATION_TYPE.ERROR)
        this.fileList = []
        return false
      }
      this.fileList = fileList
      if (this.fileList.length > 0) {
        this.uploadLoading = true
        const formData = new FormData()
        this.fileList.forEach((element, i) => {
          formData.append('file', element.raw)
        })
        upload('api/cross/db/contrast/task/import', formData).then(res => {
          this.$refs.uploadExcel.clearFiles()
          this.uploadLoading = false
          if (res.status) {
            this.crud.notify('导入成功!', CRUD.NOTIFICATION_TYPE.SUCCESS)
            this.crud.refresh()
          } else {
            this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR)
          }
        })
      } else {
        this.$notify.error({
          title: '错误',
          message: '请选择导入的文件!'
        })
      }
    },
    exportData() {
      const pkIds = this.crud.selections.map(item => item.pkId)
      this.downloadLoading = true
      request({
        url: `api/cross/db/contrast/task/export?pkIds=${pkIds}`,
        method: 'get',
        responseType: 'blob'
      }).then(result => {
        downloadFile(result, '跨库比对任务', 'xlsx')
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style>
.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>
